<template>
	<div class="zh-platform-check">
		<div class="zh-table">
			<div class="zh-table-open clear">
				<div class="zh-open-left fl">
					<!-- <div class="open-width" style="width: 120px" v-if="$store.state.platformInformation">
						<el-select v-model="platform_id" filterable placeholder="来源学校/教育局">
							<el-option
								v-for="item in platformList"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							</el-option>
						</el-select>
					</div> -->
					<div class="open-width" style="width: 100px">
						<el-select v-model="status" filterable placeholder="请选择">
							<el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</div>
					<div class="open-width">
						<el-input v-model="keyword" placeholder="请输入资源名、用户名搜索" @keyup.enter.native="searchFunc"></el-input>
					</div>
					<el-button type="primary" @click="searchFunc">搜索</el-button>
					<el-button type="primary" @click="reset">重置</el-button>

				</div>
			</div>
			<div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
				<el-table :data="listData" border max-height="600" style="width: 100%">
					<el-table-column type="index" :index="typeIndex" label="序号" align="center" show-overflow-tooltip width="50">
					</el-table-column>
					<el-table-column prop="name" label="资源名称" align="center" show-overflow-tooltip>
						<template slot-scope="scope">
							{{ scope.row.name }}.{{ scope.row.postfix }}
						</template>
					</el-table-column>
					<el-table-column label="资源分类" align="center" show-overflow-tooltip>
						<template slot-scope="scope">
							<div>{{ getResouseType(scope.row) }}</div>
						</template>
					</el-table-column>
					<el-table-column label="资源类型" align="center" show-overflow-tooltip>
						<template slot-scope="scope">
							<div v-html="getClassType(scope.row.class_type)"></div>
						</template>
					</el-table-column>
					<el-table-column prop="u_name" label="上传人" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="create_time" label="上传时间" align="center" show-overflow-tooltip>
					</el-table-column>
					<el-table-column label="审核状态" align="center" show-overflow-tooltip>
						<template slot-scope="scope">
							<div v-html="getStatus(scope.row.status)"></div>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" width="275" show-overflow-tooltip>
						<template slot-scope="scope">
							<el-button @click="viewResource(scope.row)" type="text">预览</el-button>
							<template v-if="parseInt(scope.row.status) === 2">
								<el-button @click="approve_confirm(scope.row)" type="text">批准</el-button>
								<el-button @click="rejectTrigger(scope.row)" type="text">拒绝</el-button>
							</template>
							<template v-if="parseInt(scope.row.status) === 1 || parseInt(scope.row.status) === 3">
								<el-button v-if="parseInt(scope.row.status) === 1" type="text">已批准</el-button>
								<el-button v-if="parseInt(scope.row.status) === 3" @click="reject(scope.row.comment)" type="text">拒绝理由
								</el-button>
								<el-button @click="delete_confirm(scope.row)" type="text" class="delete-button">删除</el-button>
							</template>
						</template>
					</el-table-column>
				</el-table>
				<div class="table-pagination" v-show="total_number > 10">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="listParam.page" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="listParam.size"
						layout="total, sizes, prev, pager, next, jumper" :total="total_number">
					</el-pagination>
					<div class="pagination-button">
						<el-button @click="getList" type="primary" icon="el-icon-refresh" circle title="刷新数据" size="mini">
						</el-button>
					</div>
				</div>
			</div>
		</div>
		<transition name="el-fade-in-linear">
			<div class="masking" :class="{ activeLive: isActive }">
				<div class="maskingBox" v-loading="viewLoading.status" :element-loading-text="viewLoading.txt">
					<div class="masking_h">
						<span>视频预览</span>
						<i class="el-icon-close" @click="viewClose"></i>
					</div>
					<div class="masking_c">
						<!-- <nativeVideo v-if="showVideoPlayer" :playParam.sync="playParam">
						</nativeVideo> -->
						<dplayerA v-if="showVideoPlayer" :playParam.sync="playParam"></dplayerA>
					</div>
				</div>
			</div>
		</transition>
		<transition name="el-fade-in-linear" lock-scroll="false">
			<div class="masking" :class="{ activeLive: isPDFActive }">
				<div class="maskingBox">
					<div class="masking_h">
						<span>文档预览</span>
						<i class="el-icon-close" @click="viewPDFClose"></i>
					</div>
					<div class="masking-document">
						<div class="pdf-View">
							<iframe :src="viwPdfParam.src" frameborder="0" style="width: 100%; height: 100%;"></iframe>
						</div>
					</div>
				</div>
			</div>
		</transition>
		<!--  -->

		<image-viewer v-if="imagePreview.showViewer" :initial-index="imageIndex" :on-close="closeViewer"
			:url-list="imagePreview.previewSrcList">
		</image-viewer>

		<el-dialog title="音频预览" :visible.sync="voiceVisible" width="auto" style="min-width:550px;" top="0"
			custom-class="imgVisible" :close-on-click-modal="false" :before-close="closeAudio">
			<div class="imgViewx">
				<audio id="voicepoauy" controls="controls" :src="voiceViewUrl" controlsList="nodownload" autoplay>
					Your browser does not support the audio tag.
				</audio>
			</div>
		</el-dialog>
		<el-dialog title="拒绝理由" :visible.sync="rejectFlag" :close-on-click-modal="false" :close-on-press-escape="false"
			width="30%">
			<div class="textarea-box" v-text="rejectTxt ? rejectTxt : '暂无拒绝理由'"></div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="rejectFlag = false">取 消</el-button>
				<el-button type="primary" @click="rejectFlag = false">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 拒绝bengin -->
		<el-dialog title="拒绝" :visible.sync="rejectWin" :close-on-click-modal="false" :close-on-press-escape="false"
			width="40%">
			<div class="textarea-box">
				<el-form :model="rejectForm" ref="rejectForm" label-width="80px" class="demo-ruleForm">
					<el-form-item label="拒绝理由" prop="txt"
						:rules="[{ required: true, message: '请填写拒绝理由', validator: checkValue }]">
						<el-input type="textarea" placeholder="在此填写拒绝理由..." v-model="rejectForm.txt" :maxlength="30" required>
						</el-input>
					</el-form-item>
				</el-form>
				<p class="str-num">
					<span v-text="rejectForm.txt.length"></span>/<span class="str-max">30</span>
				</p>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="rejectWinHide">取 消</el-button>
				<el-button type="primary" @click="rejectRow">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 拒绝end -->
	</div>
</template>
<script>
import nativeVideo from '../../public/nativeVideo';
import dplayerA from '@/components/public/dplayerA'
import pushLowWin from '@/components/common/push-low-win'
export default {
	data() {
		return {
			imagePreview: {
				showViewer: false,
				previewSrcList: []
			},
			loading: {
				status: false,
				txt: '获取数据...',
			},
			rejectWin: false,
			rejectObj: null,
			rejectForm: {
				txt: '',
			},
			rejectFlag: false,
			rejectTxt: '',
			listData: [],
			listParam: {
				platform_id: null,
				study_section_id: null,
				grade_id: null,
				subject_id: null,
				version_id: null,
				keyword: '',
				status: 0,
				page: 1,
				size: 10,
				data_type: 2,
				authonity: [1],
			},
			study_section_id: null,
			grade_id: null,
			subject_id: null,
			version_id: null,
			status: 0,
			keyword: '',
			orgLevel2Param: { //获取学段参数
				level: 2,
				pid: null,
				direction: 'balance',
			},
			orgLevel3Param: { //获取年纪参数
				level: 3,
				pid: null,
				direction: 'balance',
			},
			orgLevel2: [{ id: null, name: '全部学段' }],
			orgLevel3: [{ id: null, name: '全部年级' }],
			orgSubject: [{ id: null, name: '全部科目' }],
			orgVersion: [{ id: null, name: '全部版本' }],
			subjectParam: { //获取科目,版本，参数
				type: 2,
				org_id: null,
				status: 1,
			},
			versionParam: { //获取科目,版本，参数
				type: 2,
				org_id: null,
				sub_id: null,
				status: 1
			},
			total_number: 0,
			typeOption: [
				{
					value: 0,
					label: '全部状态'
				},
				{
					value: 2,
					label: '未审核'
				},
				{
					value: 3,
					label: '未通过'
				},
				{
					value: 1,
					label: '已通过'
				},
			],
			statusArr: {
				2: '未审核',
				3: '未通过',
				1: '已通过'
			},
			classTypeArr: {
				1: '课件', 2: '视频', 3: '教案', 4: '试卷', 5: '其他', 0: '未知'
			},
			watchUpload: {
				picture: false,
				relate_res: false,
			},


			isActive: true,
			isPDFActive: true,
			viwPdfParam: {
				src: '',
				loadedRatio: 0,
				page: 1,
				numPages: 0,
				rotate: 0,
			},
			imgVisible: false,
			imgViewUrl: '',
			voiceVisible: false,
			voiceViewUrl: '',
			viewLoading: {
				status: false,
				txt: '加载数据...'
			},
			showVideoPlayer: false,
			playParam: { play_url: '' },
			platform_id: null,
			platformList: [],/*学校/教育局列表 */
		}
	},
	created() {
		this.getOrgLevel2();
		this.getOrgLevel3();
		this.getSubject();
		this.getVersion();
		this.getList();
	},
	watch: {
		'listParam.study_section_id': {
			handler(newVal, oldVal) {
				this.listParam.grade_id = null;
				this.listParam.subject_id = null;
				this.listParam.version_id = null;

				this.orgLevel3Param.pid = newVal;
				this.getOrgLevel3();

				this.subjectParam.org_id = newVal;
				this.getSubject();

				this.versionParam.org_id = newVal;
				this.versionParam.sub_id = null;
				this.getVersion();
			}
		},
		'listParam.grade_id': {
			handler(newVal, oldVal) {
				this.listParam.subject_id = null;
				this.listParam.version_id = null;

				this.subjectParam.org_id = newVal;
				this.getSubject();

				this.versionParam.org_id = newVal;
				this.versionParam.sub_id = null;
				this.getVersion();
			}
		},
		'listParam.subject_id': {
			handler(newVal, oldVal) {
				this.listParam.version_id = null;

				this.versionParam.sub_id = newVal;
				this.getVersion();
			}
		}
	},
	computed: {
		/**
		 * 获取资源名称
		 * @param {Object} obj 记录信息
		 */
		getResouseType() {
			return (obj) => {
				let name1 = obj.uo_grade_name ? obj.uo_grade_name : '';
				let name2 = obj.cs_name ? obj.cs_name : '';
				let name3 = obj.cv_name ? obj.cv_name : '';

				let temp = '';

				if (name1) {
					temp = name1 + (name2 ? ' - ' + name2 : '');

					if (name2) {
						temp = name1 + ' - ' + name2 + (name3 ? ' (' + name3 + ')' : '');
					} else {
						temp = name1 + (name3 ? ' (' + name3 + ')' : '');
					}
				} else {
					temp = name2 + (name3 ? ' (' + name3 + ')' : '');
				}

				return temp;
			}
		},
		imageIndex() {
			return this.imagePreview.previewSrcList.indexOf(this.imgViewUrl);
		}
	},
	methods: {
		/**
		 * 关闭音频播放
		 */
		closeAudio() {
			this.voiceVisible = false;
			document.getElementById("voicepoauy").pause();
		},
		rejectTrigger(data) {
			/*拒绝弹窗 */
			this.rejectWin = true;
			this.rejectObj = data;

			if (this.$refs['rejectForm']) {
				this.$refs['rejectForm'].resetFields();
			}
		},
		rejectWinHide() {
			/*隐藏拒绝弹窗 */
			this.rejectWin = false;
			this.rejectObj = null;
			this.rejectForm.txt = "";
		},
		rejectRow() {
			/*拒绝 */
			let params = {
				id: this.rejectObj.id,
				status: 3,
				comment: this.rejectForm.txt
			};

			this.$refs[`rejectForm`].validate(valid => {
				if (valid) {
					this.approve(params);
				} else {
					return;
				}
			});
		},
		checkValue(rule, value, callback) {
			if (!checkSpace(value)) {
				callback(new Error("拒绝理由不能为空"));
			} else {
				callback();
			}
		},
		searchFunc() {
			this.listParam.platform_id = this.platform_id;
			this.listParam.keyword = this.keyword;
			this.listParam.study_section_id = this.study_section_id;
			this.listParam.grade_id = this.grade_id;
			this.listParam.subject_id = this.subject_id;
			this.listParam.version_id = this.version_id;
			this.listParam.status = this.status;
			this.listParam.page = 1;
			this.getList();
		},
		reject(val) {
			this.rejectFlag = true;
			this.rejectTxt = val;
		},
		reset() {
			this.platform_id = null,
				this.keyword = '';
			this.study_section_id = null
			this.grade_id = null
			this.subject_id = null
			this.version_id = null
			this.status = 0;
			this.orgLevel2Param = { //获取学段参数
				level: 2,
				pid: null,
				direction: 'balance',
			}
			this.orgLevel3Param = { //获取年纪参数
				level: 3,
				pid: null,
				direction: 'balance',
			}
			this.subjectParam = { //获取科目,版本，参数
				type: 2,
				org_id: null,
				status: 1,
			}
			this.versionParam = { //获取科目,版本，参数
				type: 2,
				org_id: null,
				sub_id: null,
				status: 1
			}
			this.listParam = {
				platform_id: null,
				study_section_id: null,
				grade_id: null,
				subject_id: null,
				version_id: null,
				keyword: '',
				status: 0,
				page: 1,
				size: 10,
				data_type: 2,
				authonity: [1],
			}
			this.getList();
		},
		upload(id) {
			this.$router.push('/resources/resource/resource-upload');
		},
		// 序号
		typeIndex(index) {
			return index + (this.listParam.page - 1) * this.listParam.size + 1;
		},
		getStatus(val) {
			return this.statusArr[parseInt(val)]
		},
		getClassType(val) {
			return this.classTypeArr[parseInt(val)]
		},
		getList() {
			this.loading.status = true;
			let success = (data => {
				console.log(data.data.data, 10000)
				this.loading.status = false;
				this.listData = data.data.data;
				this.total_number = data.data.data_sum;
			})
			let fail = (data => {
				this.loading.status = false;
				this.$message.error(data.msg)
			})
			this.listParam.examine = 1;

			this.$ajax.get('api/resource/resource', { params: this.listParam, func: { success: success, fail: fail } })
		},
		//获取学段
		getOrgLevel2() {
			let success = (data => {
				this.orgLevel2 = data.data;
				this.orgLevel2.unshift({ id: null, name: '全部学段' })
			})
			this.$ajax.get('api/org/org', { params: this.orgLevel2Param, func: { success: success } })
		},
		//获取年级
		getOrgLevel3() {
			let success = (data => {
				this.orgLevel3 = data.data;
				this.orgLevel3.unshift({ id: null, name: '全部年级' })
			})
			this.$ajax.get('api/org/org', { params: this.orgLevel3Param, func: { success: success } })
		},
		//获取科目
		getSubject() {
			let success = (data => {
				this.orgSubject = data.data;
				this.orgSubject.unshift({ id: null, name: '全部科目' });
			})
			this.$ajax.get('api/cate/subject', { params: this.subjectParam, func: { success: success } })
		},
		//获取版本
		getVersion() {
			let success = (data => {
				this.orgVersion = data.data;
				this.orgVersion.unshift({ id: null, name: '全部版本' });
			})
			this.$ajax.get('api/cate/version', { params: this.versionParam, func: { success: success } })
		},
		delete_confirm(obj) {
			let yes = (data => {
				this.delete(obj.id, 0);
			})
			let cancel = (data => { })
			this.e_confirm({ yes: yes, cancel: cancel, txt: '确定将 ' + obj.name + ' 删除吗？' });

		},
		delete(id, status) {
			let success = (data => {
				this.$message.success(data.msg);

				if (this.listData.length - 1 === 0) {
					if (this.listParam.page > 1) {
						this.listParam.page--;
					} else {
						this.listParam.page = 1;
					}
				}

				this.getList();
			});
			let params = {
				id: id,
				examine: status
			}
			this.$ajax.put('api/resource/resource', params, { func: { success: success } })
		},
		approve_confirm(obj) {
			let yes = (data => {
				var params = {
					id: obj.id,
					status: 1,
					comment: ''
				}
				this.approve(params);
			})
			let cancel = (data => { })
			this.e_confirm({ yes: yes, cancel: cancel, txt: '确定批准 ' + obj.name + '吗？' });

		},
		disapprove_dialog(obj) {
			this.$prompt('请输入拒绝理由', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPattern: /^[\S]{1,30}$/,
				inputErrorMessage: '拒绝理由不能为空，且不能超过30个字符'
			}).then(({ value }) => {
				var params = {
					id: obj.id,
					status: 3,
					comment: value
				}
				this.approve(params);
			}).catch(() => {

			});
		},
		approve(params) {
			let success = (data => {
				this.$message.success(data.msg);
				this.rejectWinHide();
				this.getList();
			});
			this.$ajax.post('api/resource/approve', params, { func: { success: success } })
		},
		handleSizeChange(val) {
			this.listParam.page = 1;
			this.listParam.size = val;
			this.getList()
		},
		handleCurrentChange(val) {
			this.listParam.page = val;
			this.getList();
		},
		pdfPageChange(val) {
			this.viwPdfParam.page = val;
		},
		error: function (err) {
			//this.$message.error('读取文件失败');
		},

		//资源预览转发
		viewResource(obj) {
			this.viewLoading.status = true;
			this.imgViewUrl = undefined;

			//视频预览
			if (parseInt(obj.file_type) === 6) {
				this.isActive = false
			}
			//图片预览
			else if (parseInt(obj.file_type) === 3) {
				this.imgVisible = true;
			}
			//文档预览
			else if (parseInt(obj.file_type) === 1) {
				// this.isPDFActive = false
			}
			//音频预览
			else if (parseInt(obj.file_type) === 5) {
				this.voiceVisible = true;
			} else {
				this.$message.warning("不支持预览的资源类型")
				return false;
			}
			let success = (data => {
				var result = data.data;
				//视频预览
				if (parseInt(result.file_type) === 6) {
					this.videoView(result.path);
				}
				//图片预览
				else if (parseInt(result.file_type) === 3) {
					this.imgView(result.path);
				}
				//文档预览
				else if (parseInt(result.file_type) === 1) {
					this.isPDFActive = false
					this.pdfView(result.path);
				}
				//音频预览
				else if (parseInt(result.file_type) === 5) {
					this.voiceView(result.path)
					//this.$message.warning("不支持预览的资源类型")
				} else {
					this.$message.warning("不支持预览的资源类型")
				}
			})
			let fail = (data => {
				this.isPDFActive = true
				this.viewLoading.status = false;
				this.$message.error(data.msg)
			})
			this.$ajax.get('api/resource/view_info', { params: { id: obj.id, is_video: obj.is_video }, func: { success: success, fail: fail } })

		},
		voiceView(url) {
			this.voiceViewUrl = url;
			document.getElementById("voicepoauy").load();
		},
		imgView(url) {
			this.imgViewUrl = url;
			this.imagePreview.showViewer = true;
			this.imagePreview.previewSrcList = [url];
		},
		closeViewer() {
			this.imagePreview.showViewer = false;
		},
		//pdf预览
		pdfView(url) {
			this.viwPdfParam.src = (url)
			// this.viwPdfParam.src =  pdf.createLoadingTask(url)
		},
		viewPDFClose() {
			this.isPDFActive = true
		},
		//关闭视频预览
		viewClose() {
			this.showVideoPlayer = false;
			this.isActive = true

		},
		//视频预览
		videoView(url) {
			this.showVideoPlayer = true;
			this.playParam.play_url = url;
		},
	},
	components: {
		// pdf,
		// nativeVideo,
		dplayerA,
	}
}
</script>
<style lang="scss">
.zh-platform-check {
	.el-table__body-wrapper table tbody {
		td:nth-child(8) {
			padding: 0;
		}
	}

	.el-dialog__wrapper .el-dialog__header {
		text-align: left;
	}

	.el-dialog__wrapper .el-dialog__footer {
		padding-top: 20px;
	}

	.textarea-box {
		position: relative;

		.el-textarea__inner {
			min-height: 120px !important;
			resize: none;
		}

		.str-num {
			position: absolute;
			padding: 0;
			margin: 0;
			left: 0;
			bottom: 5px;
			right: 15px;
			text-align: right;

			.str-max {
				color: #ddd;
			}
		}
	}

	.masking {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		// height: 100%;
		transition: .5s;
		background: rgba(0, 0, 0, .3);
		z-index: 4;

		.maskingBox {
			position: absolute;
			top: 15%;
			left: 50%;
			width: 800px;
			margin-left: -400px;
			background: #fff;
		}

		.masking_h {
			padding: 10px 15px;
			background: #348EFC;
			text-align: center;
			text-align-last: justify;

			>span,
			>i {
				font-size: 16px;
				text-align-last: initial;
				display: inline-block;
				vertical-align: middle;
				color: #fff;
			}

			>i {
				cursor: pointer;
			}
		}

	}

	.masking_c {
		padding: 15px;
		height: 450px;
	}

	.masking-document {
		height: 550px;
		overflow-y: auto;
	}

	.activeLive {
		opacity: 0;
		visibility: hidden;
	}

	.imgVisible {
		display: inline-block;
		vertical-align: middle;
		background: none;
		text-align: left;
		min-width: 550px;
		min-height: 550px;
		background: rgba(109, 116, 125, 0.78);
		margin: 0;

		.el-dialog__header {
			// display: none;
		}

		.el-dialog__body {
			text-align: center;
			padding: 0;

			img {
				max-width: 100%;
			}
		}
	}

	.el-dialog__wrapper {
		text-align: center;
	}
}
</style>